$checkbox-width: 1.25rem !default;
$checkbox-height: $checkbox-width !default;
$checkbox-border-radius: 2px;
$checkbox-label-margin: 0 1rem 0 0.5rem;
$checkbox-margin: 1rem 0;

$checkbox-checked-background-color: #3f8cb3 !default;
$checkbox-checked-hover-background-color: #59a6cd !default;
$checkbox-checked-color: $white !default;
$checkbox-checked-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.2) !default;
$checkbox-checked-border: $input-border !default;

$checkbox-icon-width: 0.875rem !default;
$checkbox-icon-height: $checkbox-icon-width !default;
$checkbox-icon-font-size: 0.875rem !default;

.rz-checkbox-list-vertical {
  .rz-checkbox {
    display: flex;
    align-items: center;
    margin: $checkbox-margin;
    cursor: pointer;
  }
}

.rz-checkbox-list-horizontal {
  .rz-checkbox {
    display: inline-flex;
    align-items: center;
  }
}

.rz-chkbox-label {
  margin: $checkbox-label-margin;
  cursor: pointer;
}

.rz-chkbox {
  display: inline-block;
  vertical-align: middle;
  position: relative;

  width: $checkbox-width;
  height: $checkbox-height;

  .rz-helper-hidden-accessible {
    opacity: 0;
    height: 0;
    overflow: hidden;
  }
}

.rz-chkbox-box {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  border: $input-border;
  border-radius: $checkbox-border-radius;
  box-shadow: $input-shadow;
  background-color: $input-background-color;

  &:hover:not(.rz-state-disabled) {
    @extend %input-hover;
  }

  &.rz-state-disabled {
    @extend %input-disabled;
  }

  .rzi {
    width: $checkbox-icon-width;
    height: $checkbox-icon-height;
    font-size: $checkbox-icon-font-size;
    color: $checkbox-checked-color;
    vertical-align: middle;
  }

  .rzi-check {
    &:before {
      content: 'check';
    }
  }

  .rzi-times {
    &:before {
      content: 'close';
    }
  }

  &.rz-state-active {
    background-color: $checkbox-checked-background-color;
    border: $checkbox-checked-border;

    &:hover {
      background-color: $checkbox-checked-hover-background-color;
      border: $checkbox-checked-border;
    }
  }
}
